<template>
<div class="navwrap">
  <div class="mynav">
    <dl class="navUl">
      <dd v-for="(title,mainindex) in titles" @mouseenter="showSub(title)" @mouseleave="closeSub(title)" class="maindd"
          :key="mainindex">

        <span v-for="(titleAllNames,index) in title" :key="index">
          <span class='titlespan' v-for="(titlenames,titleindex) in titleAllNames" :key="titleindex">
          {{titleindex}}

            <dl class="subdl" v-if="title.show">
          <!-- 巨坑啊-->

          <dd class="subdd" v-for="(titlename,subIndex) in titlenames" :key="subIndex">
            <span class="subtitlespan">{{titlename}}</span>
          </dd>
        </dl>
         </span>
         </span>
      </dd>

    </dl>
  </div>
</div>
</template>

<script>
  export default {
    name: 'navi',//和别处引用的名字不匹配不影响使用，但浏览器报错
    data() {
      return {
        'titles': [
          {'sc': {'赛事专区': {'eng': '英超联赛', 'ger': '德甲联赛', 'cnh': '中超联赛'}}, show: false},
          {'news': {'业界新闻': {'change': '重磅转会', 'clubnew': '俱乐部要闻'}}, show: false},
          {'info': {'联赛资料': {'shoot': '射手榜', 'assert': '助攻榜'}}, show: false},
          {'ad': {'开奖公告': ''}},
          {'aboutus': {'关于我们': ''}}
        ]
      }
    },
    methods: {
      showSub: function (title) {
        title.show = true;
      },
      closeSub: function (title) {
        title.show = false;
      }
    }
  }
</script>

<!--<style>-->
<!--.mynav >.navUl{padding: 0px;margin: 0px}-->
<!--.mynav >.navUl >li{float: left;}-->
<!--</style>-->

<style lang="stylus">

  .navwrap
    margin-left auto
    margin-right auto
    width 1000px;
    overflow hidden;
    position absolute;
    top 72px;
    z-index 6;
  .mynav
    width 1000px;
    height 28px;


    .navUl
      padding 0
      margin 0 0 0 -10px;

  .maindd
    list-style-type none
    float left
    width 192px
    height 200px
    margin-left 10px

    color aliceblue
    text-align center

  .titlespan
    width 192px
    height 28px
    line-height  28px
    display block
    background-color #7d84f4

  .subdl
    margin-top: 8px;

  .subdd
    width 192px
    margin-left 0
    margin-top 2px;

    .subtitlespan
      width 192px
      height 28px
      display block
      background-color #2796a4;
</style>
